<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="审核记录"
    width="800"
    draggable
    @close="close"
  >
    <el-table :data="tableData" border height="500" :loading="loading">
      <el-table-column prop="declare_elements" label="节点名称" minWidth="100">
        <template #default="{ row }">{{ row.node_name }}</template>
      </el-table-column>
      <el-table-column prop="declare_elements" label="审批人" minWidth="100">
        <template #default="{ row }">{{ row.user_id }}</template>
      </el-table-column>
      <el-table-column prop="declare_elements" label="审批结果" minWidth="100">
        <template #default="{ row }">{{ row.status_text }}</template>
      </el-table-column>
      <el-table-column prop="declare_elements" label="操作审批时间" minWidth="100">
        <template #default="{ row }">{{ formatDate(Number(row.end_time)) }}</template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="AuditRecord">
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { getFlowDetail } from "../api/index.js";
import { formatDate } from "@/utils/index.js";

const data = reactive({
  tableData: [],
  visible: false,
  load: false,
  loading: false,
});
const { tableData, visible, load, loading } = toRefs(data);
const open = async (id) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  getAuditRecord(id);
  visible.value = true;
};

const getAuditRecord = async (change_id) => {
  loading.value = true;
  try {
    const res = await getFlowDetail({
      change_id,
    });
    if (res.data?.length) {
      tableData.value = res.data[0].task_list;
    } else {
      tableData.value = [];
    }
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {});
const close = () => {
  tableData.value = [];
  visible.value = false;
};
defineExpose({ open });
</script>
